<!-- 登入框组件 -->
<template>
  <div id="login">
    <div class="login_box">
      <div class="login_box_head">
        <img src="../../assets/zhihu_icon.png" alt="" class="head_img">
        <p class="head_text">登录知乎，发现更多可信赖的解答</p>
      </div>
      <div class="login_form_box">
        <!-- 表单-->
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline class="login-form">
          <!-- 账号 -->
          <Form-item prop="user" class="form-user">
            <Input type="text" size="large" v-model="formInline.user" placeholder="手机号" clearable class="btn form-user-input"/>
          </Form-item>
          <!-- 密码 -->
          <Form-item prop="password" class="form-password">
            <Input type="password" size="large" v-model="formInline.password" placeholder="请输入登录密码" clearable class="form-password-input"/>
          </Form-item>
          <!-- 登录按钮 -->
          <Form-item class="form-submit">
            <Button type="primary" long @click="loginSubmit('formInline')" :disabled="!loginSwi" class="form-submit-button" style="font-size: 14px">登录</Button>
          </Form-item>
        </Form>
        <!-- 忘记密码 -->
        <router-link to="/forget" class="link-forget">忘记密码?</router-link>
        <!-- 后台管理 -->
        <router-link to="/adminEnter" class="link-forget" style="float: left">后台管理</router-link>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'login',
  components: {
  },
  data () {
    return {
      loginSwi: true,
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请填写手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  methods: {
    loginSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loginSwi = false
          this.axios.get('/api/login', {
            params: {
              phone: this.formInline.user,
              password: this.formInline.password
            }
          })
            .then((response) => {
              if (response.data.code === 200) {
                this.$store.commit('isLogin', '1')
                sessionStorage.setItem('phone', this.formInline.user)
                this.$Message.success('登入成功!')
                this.$router.push({path: '/home'})
                this.loginSwi = true
              } else if (response.data.code === 201) {
                this.loginSwi = true
                this.$Message.error('密码错误!')
              } else if (response.data.code === 202) {
                this.loginSwi = true
                this.$Message.error('账号错误!')
              }
            })
            .catch((error) => {
              this.loginSwi = true
              this.$Notice.error({
                title: '通知',
                desc: '后端未启动，异常！'
              })
              console.info(error)
            })
        } else {
          this.$Notice.error({
            title: '通知',
            desc: '请填写完整！'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  /*@import 'xxx.css';*/
  #login{
    width: 100%;
    height: 440px;
    background-color: white;
    padding-top: 20px;
    border-radius: 2px;
  }

  .login_box_head{
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    text-align: center;
  }

  .head_img{
    width: 140px;
    height: 65px;
    margin-bottom: 10px;
  }

  .head_text{
    font-size: 22px;
    color: #0084ff;
  }

  .login_form_box{
    height: auto;
    width: 100%;
    padding: 0px 40px 0px 40px;
    float: left;
    margin-top: 30px;
    text-align: center;
  }

  .form-user,.form-password,.form-submit {
    width: 100%;
    margin-bottom: 30px;
  }

  .link-forget{
    color: #8590a6;
    font-size: 14px;
    float: right;
  }

  .link-forget:hover{
    color: #76839b;
  }
</style>
